<template>
  <div class="area-select-wrap">
    <el-select v-model="provinceVal" placeholder="请选择省" @change="provinceChange">
      <el-option 
        v-for="(val,key) in provinceObj" 
        :key="key" 
        :label="val" 
        :value="key"> 
      </el-option>
    </el-select>
    <el-select v-model="cityVal" placeholder="请选择市" no-data-text="无数据" @change="cityChange" v-if="!hideCity">
      <el-option 
        v-for="(val,key) in cityObj" 
        :key="key" 
        :label="val" 
        :value="key"> 
      </el-option>
    </el-select>
    <el-select v-model="areaVal" placeholder="请选择区/县" no-data-text="无数据" @change="areaChange" v-if="!hideArea">
      <el-option 
        v-for="(val,key) in areaObj" 
        :key="key" 
        :label="val" 
        :value="key"> 
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { areaList } from '@vant/area-data'
export default defineComponent({
  name: 'AreaSelect',
  props: {
    province: {
      type: String,
      default: ''
    },//省份值
    city: {
      type: String,
      default: ''
    },//城市值
    area: {
      type: String,
      default: ''
    },//地区值
    hideCity:{
      type:Boolean,
      default:false
    },//是否隐藏 城市选项
    hideArea:{
      type:Boolean,
      default:false
    }//是否隐藏 地区选项
  },
  setup(props,context) {

    let hideCity=ref(false)
    let hideArea=ref(false)
    
    let provinceVal=ref()//选择的省份
    let provinceObj = ref({})//省份选项数据

    let cityVal=ref()//选择的城市
    let cityObj=ref({})//城市选项数据

    let areaVal=ref()//选择的地区
    let areaObj=ref({})//地区选项数据

    // 初始化数据
    const initData = () => {
      provinceObj.value = areaList.province_list
      if(props.hideCity){
        hideCity.value=true
        hideArea.value=true 
      }else{
        if(props.hideArea){
          hideArea.value=true 
        }
      }
    }
    initData()

    // 省份选择
    const provinceChange=(e:any)=>{
      // 选择好省份 更新对应 城市数据
      let obj={}
      for(let key in areaList.city_list){
        if(Number(key)>Number(e)&&Number(key)<Number(e)+10000){
          obj={...obj,[key]:areaList.city_list[key]}
        }
      }
      cityVal.value=''
      cityObj.value=obj
      areaVal.value=''
      areaObj.value={}

      const val=provinceObj.value[provinceVal.value]
      context.emit('provinceChange',val)
      context.emit('cityChange','')
    }

    //城市选择
    const cityChange=(e:any)=>{
      //选择好城市 更新对应地区数据
      let obj={}
      for(let key in areaList.county_list){
        if(Number(key)>Number(e)&&Number(key)<Number(e)+100){
          obj={...obj,[key]:areaList.county_list[key]}
        }
      }
      areaVal.value=''
      areaObj.value=obj

      const val=cityObj.value[cityVal.value]
      context.emit('cityChange',val)
    }

    //地区选择
    const areaChange=()=>{
      const val=areaObj.value[areaVal.value]
      context.emit('areaChange',val)
    }

    
    return {
      provinceVal,
      provinceObj,
      provinceChange,
      cityVal,
      cityObj,
      cityChange,
      areaVal,
      areaObj,
      areaChange,
      hideCity,
      hideArea
    }
  }
})
</script>

<style lang="scss" scoped>
.area-select-wrap .el-select{
  width: 130px;
  margin-right: 10px;
}
</style>
